<template>
    <div id="app">
		<!-- 顶部 Header 区域 -->
		<NavBar title="Vue-CMS" :border="false" fixed placeholder :left-arrow="isShowBack" 
			:left-text="isShowBack ? '返回' : ''" @click-left="goBack"/>
		<!-- 中间的 router-view 区域 -->
		<transition>
			<router-view></router-view>
		</transition>
		<!-- 底部 Tabbar -->
		<Tabbar route fixed placeholder>
			<TabbarItem :to="{ name: 'Home' }" icon="wap-home-o">首页</TabbarItem>
			<TabbarItem :to="{ name: 'Member' }" icon="user-circle-o">会员</TabbarItem>
			<TabbarItem :to="{ name: 'ShopCart' }" icon="shopping-cart-o" :badge="getCountAndAmountForShopCart.count" 
				id="badge">购物车</TabbarItem>
			<TabbarItem :to="{ name: 'Search' }" icon="search">搜索</TabbarItem>
		</Tabbar>
    </div>
</template>

<script>
import { NavBar, Tabbar, TabbarItem } from 'vant';

export default {
	components: { NavBar, Tabbar, TabbarItem },
	data() {
		return {
			isShowBack: true
		};
	},
	computed: {
		getCountAndAmountForShopCart() {
            return this.$store.getters['shopCart/getCountAndAmount'];
        }
	},
	methods: {
		goBack() {
			this.$router.back();
		}
	},
	watch: {
		'$route.path': function(path) {
			this.isShowBack = !(path === '/home');
		}
	}
};
</script>

<style lang="less">
	html, body {
		margin: 0;
		background-color: #fff !important;
		height: 100%;
	}
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* padding: 44px 0 50.4px 0; */
		width: 100vw;
		overflow: hidden;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}
	.van-nav-bar {
		background-color: #26a2ff;
		.van-nav-bar__title {
			color: #fff;
		}
		.van-nav-bar__text {
			color: #fff;
		}
		.van-icon {
			color: #fff;
		}
	}
	.v-enter {
		opacity: 0;
		transform: translateX(100%);
	}
	.v-leave-to {
		opacity: 0;
		transform: translateX(-100%);
		position: absolute;
		width: 100%;
	}
	.v-enter-active, .v-leave-active {
		transition: all 0.5s ease;
	}
</style>
